<template>
  <div class="decorate-comtainer">
    <decorate-header></decorate-header>
    <div class="decorate-main">
      <decorate-aside></decorate-aside>
      <decorate-preview></decorate-preview>
      <decorate-panel></decorate-panel>
    </div>
  </div>
</template>

<script>
import {
  DecorateHeader,
  DecorateAside,
  DecoratePreview,
  DecoratePanel
} from './components'
import { STORE_NAMESPACE } from './config'
export default {
  name: 'Deocrate',
  components: {
    DecorateHeader,
    DecorateAside,
    DecoratePreview,
    DecoratePanel
  },
  data () {
    return {
      shopId: '80807'
    }
  },
  created () {
    document.body.classList.add('decorate')
    this.$store.dispatch(`${STORE_NAMESPACE}/setShopId`, this.shopId)
  },
  beforeDestroy () {
    document.body.classList.remove('decorate')
  }
}
</script>

<style lang="less">
// @import "//at.alicdn.com/t/font_2426749_v40kvf6zvo.css";
@import "../../assets/iconfont/iconfont.css";
.decorate {
  z-index: 0;
  position: relative;
  .decorate-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 13px;
    & ::v-deep ul,
    & ::v-deep li {
      margin: 0; 
      padding: 0; 
      list-style: none;
    }
  }
  .decorate-main {
    display: flex; flex: 1;
  }
}
</style>